<template>
  <div class="boxWrap pagePC" :class="{'pageEN': curLocale == 'en', 'pageZH': curLocale == 'zh'}">
    <div class="left">
      <div class="title">
        <h1>{{pageData.baseDto.lightSpotBackTitle}}</h1>
        <h2>{{pageData.baseDto.lightSpotTitle}}</h2>
      </div>

      <div class="desc">
        <div class="item case1">
          <div class="itemBox">
          <img class="img" :src="pageData.lightSpotContentDtoList[0]?.backUrl"/>
          <div class="text1">{{pageData.lightSpotContentDtoList[0]?.title}}</div>
          <div class="text2">{{pageData.lightSpotContentDtoList[0]?.descrip}}</div>
          </div>
        </div>
        <div class="item case2">
          <div class="itemBox">
          <img class="img" :src="pageData.lightSpotContentDtoList[1]?.backUrl"/>
          <div class="text1">{{pageData.lightSpotContentDtoList[1]?.title}}</div>
          <div class="text2">{{pageData.lightSpotContentDtoList[1]?.descrip}}</div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <img class="img" :src="pageData.baseDto?.imgLeft"/>
      </div>
    </div>
    <div class="right">
      <!--style="background-size: 100% 100%;"-->
      <!--:style="{'background-image': 'url(' + pageData.baseDto?.imgRight + ')'}"-->
      <div      class="part1">

        <img class="bgImg" :src="pageData.baseDto?.imgRight"/>

        <div class="item case2">
          <div class="itemBox">
          <img class="img" :src="pageData.lightSpotContentDtoList[2]?.backUrl"/>
          <div class="text1">{{pageData.lightSpotContentDtoList[2]?.title}}</div>
          <div class="text2">{{pageData.lightSpotContentDtoList[2]?.descrip}}</div>
          </div>
        </div>
      </div>

      <div class="part2">
        <div class="item case1">
          <div class="itemBox">
          <img class="img" :src="pageData.lightSpotContentDtoList[3]?.backUrl"/>
          <div class="text1">{{pageData.lightSpotContentDtoList[3]?.title}}</div>
          <div class="text2">{{pageData.lightSpotContentDtoList[3]?.descrip}}</div>
          </div>
        </div>
        <div class="item case2">
          <div class="itemBox">
          <img class="img" :src="pageData.lightSpotContentDtoList[4]?.backUrl"/>
          <div class="text1">{{pageData.lightSpotContentDtoList[4]?.title}}</div>
          <div class="text2">{{pageData.lightSpotContentDtoList[4]?.descrip}}</div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="pageMobile" :class="{'pageEN': curLocale == 'en', 'pageZH': curLocale == 'zh'}">

    <div class="boxTitle" style="margin: 10px 0 5px;">
      <div class="title">
        <h2>{{pageData.baseDto.lightSpotTitle}}</h2>
      </div>
    </div>

    <div class="item" v-for="(item,index) in pageData.lightSpotContentDtoList" :class="'case' + index ">
      <img class="img" :src="item?.backUrl"/>
      <div class="text1">{{item?.title}}</div>
      <div class="text2">{{item?.descrip}}</div>
    </div>
  </div>
</template>

<script setup>
  import {ref, computed} from 'vue'
  import {useLocaleStore} from '../../store/locales.js'
  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })


  const curLocale = computed(() => {		// 定义计算属性
    const useLocale = useLocaleStore()
    return useLocale.locale
  })
</script>

<style scoped lang="scss">

  @media screen and (max-width: 1079px) {
    .pagePC{
      display: none;
    }
    .pageMobile{
      display: flex; flex-wrap: wrap;

      &.pageEN{
        .item{
          padding: 10px;
          .img {
            height: auto; margin-top: -10px;
          }
          .text1 {
            font-size: 14px;
            font-weight: bold;
            line-height: 20px;
          }
          .text2 {
            font-size: 14px;
            padding-top: 5px;
          }
        }
      }

      .item{
        width: 50%;
        padding: 15px;
        .img {
          width: 70px;
          height: auto;
        }
        .text1 {
          color: #1A1A25;
          font-size: 16px;
          font-weight: bold;
          line-height: 28px;
        }
        .text2 {
          color: #69696F;
          font-size: 14px;
          padding-top: 0;
        }

        &.case0 {
          background-color: #EFF0FA;
        }
        &.case1 {
          background-color: #E7E8F2;
        }
        &.case2 {
          background-color: #707DF5;
          .text1 {
            color: #fff;
          }
          .text2 {
            color: #fff;
          }
        }
        &.case3 {
          background-color: #1069EF;
          .text1 {
            color: #fff;
          }
          .text2 {
            color: #fff;
          }
        }
        &.case4 {
          background-color: #1027EF;
          .text1 {
            color: #fff;
          }
          .text2 {
            color: #fff;
          }
        }
      }
    }
  }

  @media screen and (min-width: 1080px) {
    .pageMobile{
      display: none;
    }
    /*配合放大的框*/
    .itemBox{
      width: 100%; height: 14.7vw;  padding: 1vw;
      transition: all 0.5s;
      &:hover{
        transform: scale(1.05);
      }
    }

    .boxWrap {
      width: 100%;
      display: flex;
      margin-top: 4vw;

      &.pageEN{

        .left {
          .desc {
            .item {
              .img {
                width: 6vw; margin-top: -0.5vw;
              }
              .text1 {
                font-size: 0.8vw;
                line-height: 1.4vw; min-height: 2.8vw;
              }
              .text2 {
                font-size: 0.8vw;
                padding-top: 0.5vw;
              }
            }
          }
        }
        .right {
          .part1 {
            .item {
              .img {
                width: 6vw;  margin-top: -0.5vw;
              }
              .text1 {
                font-size: 0.8vw;
                line-height: 1.4vw;
              }
              .text2 {
                font-size: 0.8vw;
                padding-top: 0.5vw;
              }
            }
          }

          .part2 {
            .item {
              .img {
                width: 6vw; margin-top: -0.5vw;
              }
              .text1 {
                font-size: 1vw;
                font-weight: bold;
                line-height: 1.4vw;
              }
              .text2 {
                color: #fff;
                font-size: 0.8vw;
                padding-top: 0.5vw;
              }
            }
          }
        }



      }

      .left {
        flex: 1;
        .title {
          height: 8.4vw;
          position: relative;
          h1 {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 3vw;
            color: #f6f6f6;
            font-weight: normal;
            z-index: -1;
            line-height: 5vw;
          }
          h2 {
            font-size: 1.8vw;
            line-height: 7.5vw;
            color: #1A1A25;
          }
        }

        .desc {
          height: 14.7vw;
          display: flex;
          .item {
            flex: 1;
            height: 14.7vw;
            .img {
              width: 7vw;
              height: auto;
            }
            .text1 {
              color: #1A1A25;
              font-size: 1.2vw;
              font-weight: bold;
              line-height: 2vw;
            }
            .text2 {
              color: #69696F;
              font-size: 0.8vw;
              padding-top: 1vw;
            }

            &.case1 {
              background-color: #eff0fa;
            }
            &.case2 {
              background-color: #e7e8f2;
            }
          }
        }
        .bottom {
          height: 20.8vw;
          width: 100%;
          overflow: hidden;
          .img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;
            &:hover {
              transform: scale(1.05);
            }
          }
        }
      }
      .right {
        flex: 1;
        .part1 {
          position: relative;
          height: 23.1vw; overflow: hidden;
          // background: url('@/assets/images/index/img1.png') no-repeat;
          // background-size: 100% 100%;

          .bgImg{
            width: 100%; height: 100%; display: block; transition: all 0.5s;
            &:hover{
              transform: scale(1.05);
            }
          }

          .item {
            height: 14.7vw;
            width: 50%; z-index: 2; overflow: hidden;
            background-color: rgba(16, 39, 239, 0.7);
            position: absolute;
            left: 0;
            bottom: 0;
            .img {
              width: 7vw;
              height: auto;
            }
            .text1 {
              color: #fff;
              font-size: 1.2vw;
              font-weight: bold;
              line-height: 2vw;
            }
            .text2 {
              color: #fff;
              font-size: 0.8vw;
              padding-top: 1vw;
            }
          }
        }

        .part2 {
          display: flex;
          .item {
            flex: 1;
            height: 14.7vw;
            overflow: hidden;
            .img {
              width: 7vw;
              height: auto;
            }
            .text1 {
              color: #fff;
              font-size: 1.2vw;
              font-weight: bold;
              line-height: 2vw;
            }
            .text2 {
              color: #fff;
              font-size: 0.8vw;
              padding-top: 1vw;
            }
            &.case1 {
              background-color: #1069ef;
            }
            &.case2 {
              background-color: #1027ef;
            }
          }
        }
      }
    }
  }


</style>
